<template>
  <div class="content">
<!--    第一部分-->
    <ShopHeader/>
<!--    第二部分-->
    <div class="display-flex jc-around Shoptitle pt-1 bg-white">
      <router-link tag="div" replace to="/shop/goods" :class="{active:$route.path === '/shop/goods'}">点餐</router-link>
      <router-link tag="div" :to="{path:'/shop/rating'}" :class="{active:$route.path === '/shop/rating'}" @click.native="hello">评价</router-link>
      <router-link tag="div" to="/shop/info" :class="{active:$route.path === '/shop/info'}">商家</router-link>
    </div>
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
  import ShopHeader from "./chirdren/ShopHeader";
  import {RECEIVE_INFO} from '../../store/mutation-types'
  export default {
    name: "Shop",
    components:{
      ShopHeader
    },
    methods:{
      async getInfoData(){
        const res = await this.$http.get(`/info`)
        this.$store.commit(RECEIVE_INFO,res.data)
      },
      hello(){
        console.log('hhh')
      }
    },
    created() {
      this.getInfoData()
    }
  }
</script>

<style lang="scss" scoped>
  .content{
    overflow: hidden;

    .Shoptitle{
      border-bottom: 1px solid rgba(7,17,27,0.1);
      div {
        color:#7e8c8d;
        font-size: 14px;
        padding: 6px 3px;
        &.active{
          color: #02a774;
          border-bottom: 2px solid #02a774;
        }
      }
    }
  }
</style>
